<template>
  <div class="app-container">
    <div class="designer" style="height: 100%">
      <!-- 门户管理 -->
      <div v-show="!showDesigner">
        <!-- 顶部门户搜索和门户操作按钮 -->
        <div style="marginBottom: 20px">
          <el-input v-model="searchText" placeholder="请输入名称" size="small" style="width: 200px">
          </el-input>
          <el-button style="marginLeft: 10px" type="primary" size="small" @click="searchChange">搜索</el-button>
          <el-button style="marginLeft: 10px" size="small" @click="resetSearch">重置</el-button>
          <div style="float: right">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="addPortal">新增</el-button>
            <el-button size="small" @click="multiDelPortal" :disabled="multipleSelection.length===0">批量删除</el-button>
            <el-tooltip class="item" effect="dark" content="显隐" placement="top">
              <el-button icon="el-icon-s-operation" circle @click="drawer=true"></el-button>
            </el-tooltip>
          </div>
        </div>
        <el-table ref="multipleTable" :data="tableData" stripe style="width: 100%; marginBottom: 20px" size="small"
          @selection-change="handleSelectionChange" v-loading="tableLoading" class="tableInfo" :row-key="getRowKeys"
          row-key="id">
          <el-table-column type="selection" width="80" align="center" :reserve-selection="true">
          </el-table-column>
          <el-table-column label="序号" width="80" align="center" v-if="!showHideData[0].hide" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{
                scope.$index + (page.pageNo - 1) * page.pageSize + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="portalNumber" label="编码" align="center" v-if="!showHideData[1].hide" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="portalName" label="名称" align="center" v-if="!showHideData[2].hide" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="portalDesc" label="描述" align="center" v-if="!showHideData[3].hide" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center" v-if="!showHideData[4].hide" show-overflow-tooltip>
            <template slot-scope="scope">{{
              getDateTime(scope.row.createTime)
            }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="editPortal(scope.row)">编辑</el-button>
              <el-button size="small" type="text" @click="previewPortal(scope.row)">预览</el-button>
              <el-button size="small" type="text" @click="copyPortal(scope.row)">复制</el-button>
              <el-button size="small" type="text" style="color: red" @click="delPortal(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background :layout="layout" :total="pageTotal" :page-size="page.pageSize" :page-sizes="pageSizes"
          :current-page="page.pageNo" style="float: right" @size-change="sizeChange" @current-change="currentChange">
        </el-pagination>
      </div>
      <!-- 新增--门户设计页面 -->
      <div v-show="showDesigner">
        <!-- 门户设计顶部 -->
        <el-row :gutter="24">
          <el-col :span="18">
            <div class="designHeader">
              <div class="designStep">
                <div v-for="(item, index) in steps" :key="index" class="designStepItem">
                  <div class="designStepLine" :style="{border:index > 0? '1px solid rgba(0,0,0,0.3)' : '1px solid white'}"></div>
                  <div class="designStepIndex" :style="{background:index < stepNum ? '#409EFF' : 'rgba(0,0,0,0.3)'}">
                    {{ index + 1 }}
                  </div>
                  <div class="designStepTitle">{{ item }}</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6" style="textAlign: right">
            <el-button v-show="stepNum > 1" @click="nextStep('sub')">上一步</el-button>
            <el-button v-show="stepNum === 1" @click="nextStep('plus')">下一步</el-button>
            <el-button v-show="stepNum === 2" type="primary" @click="finishPortal">完成</el-button>
            <el-button type="danger" @click="closeDesign">关闭</el-button>
          </el-col>
        </el-row>
        <!-- 步骤1---基础信息 -->
        <div v-show="stepNum === 1" class="base">
          <el-form :model="portalInfo.basic" ref="basicForm" label-width="120px" class="demo-ruleForm">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="编号:" prop="portalNumber" :rules="[
                    {
                      required: true,
                      message: '请输入编号',
                      trigger: 'blur',
                    }
                  ]" class="formnum">
                  <el-input v-model="portalInfo.basic.portalNumber" placeholder="请输入编号">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="名称:" prop="portalName" :rules="[
                    {
                      required: true,
                      message: '请输入名称',
                      trigger: 'blur',
                    }
                  ]">
                  <el-input v-model="portalInfo.basic.portalName" placeholder="请输入名称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="上级功能:" prop="superior">
                  <treeselect v-model="portalInfo.basic.superior" :options="superior" :normalizer="normalizer"
                    :show-count="true" placeholder="选择上级菜单" :clearable="false" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="图标:" prop="icon" :rules="[
                    {
                      required: true,
                      message: '请选择图标',
                      trigger: 'change',
                    }
                  ]">
                  <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                    <IconSelect ref="iconSelect" @selected="selected" />
                    <el-input slot="reference" v-model="portalInfo.basic.icon" placeholder="点击选择图标" readonly>
                      <svg-icon v-if="portalInfo.basic.icon" slot="prefix" :icon-class="portalInfo.basic.icon"
                        class="el-input__icon" style="height: 32px; width: 16px" />
                      <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                    </el-input>
                  </el-popover>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="排序:" prop="sort" :rules="[
                    {
                      required: true,
                      message: '请输入排序',
                      trigger: 'blur',
                    },{validator:sortValidator,trigger:'blur'}
                  ]">
                  <el-input-number v-model="portalInfo.basic.sort" placeholder="请输入排序" controls-position="right"
                    :min="0" style="width:100%;">
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="功能描述:" prop="portalDesc">
              <el-input type="textarea" v-model="portalInfo.basic.portalDesc" :rows="5" maxlength="200" show-word-limit
                placeholder="请输入功能描述">
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <!-- 步骤2---桌面设计 -->
        <div v-show="stepNum === 2">
          <form-editor ref="design" :getNames="showDesigner">
          </form-editor>
        </div>
      </div>
      <!-- 门户预览 -->
      <el-dialog :visible.sync="dialogPreviewVisible" fullscreen>
        <parser :portalConfData="portalConfData" v-if="dialogPreviewVisible"></parser>
      </el-dialog>
      <!-- 列显隐 -->
      <el-drawer :visible.sync="drawer" direction="rtl">
        <span slot="title" style="fontSize:18px;font-weight:500;color: #262626;">列显隐</span>
        <el-table :data="showHideData" size="small" border style="width:80%;marginLeft:10%;">
          <el-table-column prop="columnName" label="列名" align="center">
          </el-table-column>
          <el-table-column prop="hide" label="隐藏" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.hide"></el-checkbox>
            </template>
          </el-table-column>
        </el-table>
      </el-drawer>
    </div>
  </div>
</template>
<script>
  import FormEditor from './components/formEditor';
  import { reorganizationParam } from '@/utils/index'
  import parser from './components/parser'
  import Sortable from "sortablejs";
  import {
    menuRelease,
    menuUpdate
  } from "@/api/custom/formPoster";
  import {
    getPagePortal,
    addPortal,
    delPortal,
    editPortal,
    batchDelPortal
  } from "@/api/custom/portalDesigner"
  import {
    getRouters
  } from "@/api/menu";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import IconSelect from "@/components/IconSelect";
  import router from '@/router'
  import { deepClone } from '../../../utils';
  export default {
    components: {
      Treeselect,
      IconSelect,
      FormEditor,
      parser
    },
    data() {
      return {
        searchFormData: {},
        stepNum: 1, //当前步骤
        steps: ["基础信息", "桌面设计"], //步骤名称
        //列显隐
        showHideData: [{
            columnName: '序号',
            hide: false
          },
          {
            columnName: '编码',
            hide: false
          },
          {
            columnName: '名称',
            hide: false
          },
          {
            columnName: '描述',
            hide: false
          },
          {
            columnName: '创建时间',
            hide: false
          }
        ],
        drawer: false, //列显隐抽屉
        showDesigner: false, //显示门户设计页面
        tableLoading: false, //表格加载
        menuId: "", //菜单id
        searchText: "", //关键字搜索
        layout: "prev, pager, next,sizes,jumper", //分页显示布局
        pageSizes: [10, 20, 30, 50], //分页显示每页条数选择
        pageTotal: 3, //数据总条数
        page: {
          pageNo: 1, // 当前页数
          pageSize: 10, // 每页显示多少条
        },
        superior: [], //上级功能
        //菜单发布数据
        portalInfo: {
          id: "", //id门户id
          basic: {
            portalNumber: "", //门户编码
            portalName: "", //门户名称
            superior: 0, //父菜单id
            sort: "", //排序
            icon: "", //图标
            portalDesc: "", //门户描述
          } //门户基础信息
        },
        tableData: [], //门户数据列表
        multipleSelection: [], //多选
        dialogPreviewVisible: false,//预览弹窗显示
        portalConfData: [], //门户页面组件配置
        portalNumber: '', //门户编码，编辑时作为原始数据备份
        portalName: '', //门户名称，编辑时作为原始数据备份
        isCopy: false, //执行复制操作标识，避免重复点击多次执行操作报错
        isFinish: false, //执行完成操作标识，避免重复点击多次执行操作报错
        superiorCopy: '' // 初始化时存储上级功能字段
      };
    },
    mounted() {
      // 阻止默认行为
      document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
      };
      this.getList(); //获取门户列表数据
      this.getTreeselect(); //获取菜单下拉树
      this.tableLoading = true
    },
    watch: {
        dialogPreviewVisible (newVal) {
            this.$store.commit('CHANGE_FLAG', newVal)
        }
    },
    methods: {
      //多选rowkey
      getRowKeys(row) {
        return row.id;
      },
      // 选择图标
      selected(name) {
        this.portalInfo.basic.icon = name;
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children,
        };
      },
      /** 查询菜单下拉树结构 */
      getTreeselect() {
        getRouters().then((response) => {
          this.superior = []
          let menu = {
            id: 0,
            name: "主类目",
            children: [],
          };
          response.data.map((item) => {
            this.changeChildren(item)
          })
          menu.children = response.data
          this.superior.push(menu)
        });
      },
      //树结构children处理
      changeChildren(item) {
        if (item.children === null) {
          item.children = []
        } else {
          item.children.map((data) => {
            this.changeChildren(data)
          })
        }
      },
      //获取门户列表数据
      getList() {
        let params = {
          ...this.page, //页配置
          // portalName: this.searchText, //门户名称关键字
          portalName: this.searchFormData.name //门户名称关键字
        };
        getPagePortal(params)
          .then((res) => {
            if (res.code === 0) {
              this.tableData = res.data.list;
              this.pageTotal = res.data.total;
              this.tableLoading = false;
            }
          })
          .catch((e) => {
            this.tableLoading = false;
          });
      },
      //时间戳格式化
      getDateTime(time) {
        let date = new Date(time);
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hour = date.getHours()
        let minute = date.getMinutes()
        let second = date.getSeconds()
        return `${year}-${month<10?'0':''}${month}-${day<10?'0':''}${day}
          ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`
      },
      //多选，数据选择改变
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //编辑门户，拿到门户数据赋值
      editPortal(row) {
        if(!row.manageMenu){
          this.$message.warning('该菜单已被删除，请重新填写基础信息，并重新发布！')
        }
        this.$store.commit('CHANGE_FLAG', false)
        this.portalInfo.id = row.id;
        this.portalNumber = row.portalNumber
        this.portalName = row.portalName
        this.menuId = row.manageMenuId
        this.portalInfo.basic.portalNumber = row.portalNumber;
        this.portalInfo.basic.portalName = row.portalName
        this.portalInfo.basic.portalDesc = row.portalDesc
        this.portalInfo.basic.sort = row.manageMenu?row.manageMenu.sort:0
        this.portalInfo.basic.icon = row.manageMenu?row.manageMenu.icon:'cc',
        this.portalInfo.basic.superior = row.manageMenu?row.manageMenu.parentId:0
        this.$refs.design.drawingList = JSON.parse(row.portalJsonMessage)  //给formEditor门户设计器参数赋值，渲染门户各组件
        this.$refs.design.activeData = this.$refs.design.drawingList[0] //激活第一个组件
        this.showDesigner = true;
        this.superiorCopy = deepClone(this.portalInfo.basic.superior)
      },
      //预览门户
      previewPortal(row) {
        this.portalConfData = JSON.parse(row.portalJsonMessage) //给解析器parser参数赋值，渲染各组件，生成页面
        this.dialogPreviewVisible = true
      },
      //生成随机数
      getRandomStr(len) {
        var str = "";
        for (let i = 0; i < len; i++) {
          str += Math.ceil(Math.random() * 10)
        }
        return str
      },
      //复制门户
      copyPortal(row) {
        if (this.isCopy) {
          return
        }
        this.isCopy = true //正在执行复制操作
        this.menuId = ''
        let newName = `${row.portalName}_copy_${this.getRandomStr(3)}` //随机生成新门户名称
        let newNumber = `${row.portalNumber}_copy_${this.getRandomStr(3)}` //随机生成新门户编码
        if (newName.length > 50 || newNumber.length > 100) {  //复制门户的名称、编码长度校验
          this.$message.error('复制门户的名称长度超过50或编码长度超过100，无法复制')
          this.isCopy = false
        } else {
          let data = {
          component: "custom/portaldesign/components/portalPage",
          icon: row.manageMenu?row.manageMenu.icon:'cc',
          name: newName,
          parentId: row.manageMenu?row.manageMenu.parentId:0,
          path: row.manageMenu.parentId === 0 ?
            `/portal/portalPage/${newName}/${newNumber}` : `portalPage/${newNumber}`,
          permission: "",
          sort: row.manageMenu?row.manageMenu.sort + 1:0,
          status: 0,
          type: 2,
        };
        this.publishMenu(data); //发布门户
        let timer = setInterval(() => {
          if (this.menuId) {
            clearInterval(timer);
            let params = {
              portalNumber: newNumber,
              portalName: newName,
              portalDesc: row.portalDesc,
              portalJsonMessage: row.portalJsonMessage,
              manageMenuId: this.menuId,
            };
            //添加门户信息
            addPortal(params)
              .then((res) => {
                if (res.code === 0) {
                  data.path = row.manageMenu.parentId === 0 ?
                    `/portal/portalPage/${newName}/${res.data}` :
                    `portalPage/${res.data}`
                  data.id = this.menuId
                  this.updateMenu(data)  //修改门户菜单path,用门户id替换newNumber
                    this.$message.success("门户复制成功");
                    this.closeDesign();
                    this.page.pageNo = 1;
                    this.searchText = "";
                    this.isCopy = false
                    // this.tableLoading = true;
                    this.$refs.multipleTable.clearSelection();
                    this.getList();
                    this.$store.dispatch("GenerateRoutes").then((per) => {
                        router.addRoutes(per)
                    });
                    // setTimeout(() => {
                    //   window.location.reload() //重新加载页面
                    // }, 1000)
                }
              })
              .catch((e) => console.log(e));
          }
        }, 1000);
        }
      },
      //删除门户
      delPortal(row) {
        this.$confirm("是否确认删除", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            return delPortal({
              id: row.id
            });
          })
          .then((res) => {
            if (res.code === 0) {
              this.$message.success("删除成功");
              this.getList();
              this.$store.dispatch("GenerateRoutes").then((per) => {
                // router.addRoutes(per)
              });
              // setTimeout(() => {
              //   window.location.reload()
              // }, 1000)
            }
          })
          .catch((e) => console.log("删除表单信息:", e));
      },
      //批量删除门户
      multiDelPortal() {
        this.$confirm('是否确认删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = this.multipleSelection.map((item) => {
            return item.id
          })
          batchDelPortal(ids).then(res => {
            if (res.code === 0) {
              this.$message.success('删除成功')
              // setTimeout(() => {
              //   window.location.reload()
              // }, 1000)
              this.getList();
              this.$store.dispatch("GenerateRoutes").then((per) => {
                // router.addRoutes(per)
              });
            } else {
              this.$message.error('所选数据删除失败！')
            }
          }).catch(e => console.log('批量删除：', e))
        })
      },
      //新增门户，显示设计界面
      addPortal() {
        this.$store.commit('CHANGE_FLAG', false)
        this.showDesigner = true;
      },
      //门户菜单发布
      publishMenu(data) {
        //用户提交菜单
        menuRelease(data)
          .then((res) => {
            if (res.code === 0) {
              this.menuId = res.data;
              //this.$message.success('提交菜单发布成功')
            }
          })
          .catch((e) => console.log(e));
      },
      //修改菜单
      updateMenu(data,val) {
        menuUpdate(data)
          .then((res) => {
            if(val){val()}
            if (res.code === 0) {}
          })
          .catch((e) => console.log(e));
      },
      //门户设计完成
      finishPortal() {
        if (this.isFinish) {
          return
        }
        this.isFinish = true //当前正在执行完成操作
        if (!this.portalInfo.id) { //新增门户
          //门户菜单参数
          let data = {
            component: "custom/portaldesign/components/portalPage",
            icon: this.portalInfo.basic.icon,
            name: this.portalInfo.basic.portalName,
            parentId: this.portalInfo.basic.superior,
            path: this.portalInfo.basic.superior === 0 ?
              `/portal/portalPage/${this.portalInfo.basic.portalName}/${this.portalInfo.basic.portalNumber}` :
              `portalPage/${this.portalInfo.basic.portalNumber}`,
            permission: "",
            sort: this.portalInfo.basic.sort,
            status: 0,
            type: 2,
          };
          this.publishMenu(data); //发布门户菜单
          let timer = setInterval(() => {
            if (this.menuId) {
              clearInterval(timer);
              //门户信息
              let params = {
                ...this.portalInfo.basic, //基本信息
                portalJsonMessage: JSON.stringify(this.$refs.design.drawingList), //配置
                manageMenuId: this.menuId, //菜单id
              };
              //添加门户信息
              addPortal(params)
                .then((res) => {
                  if (res.code === 0) {
                    data.path = this.portalInfo.basic.superior === 0 ?
                      `/portal/portalPage/${this.portalInfo.basic.portalName}/${res.data}` :
                      `portalPage/${res.data}` //修改菜单path
                    data.id = this.menuId

                    new Promise((val=>{
                      this.updateMenu(data,val) //修改门户菜单，用门户id替换portalNumber，以便后续根据id获取门户详情解析渲染页面
                    })).then(()=>{
                      this.$message.success("门户创建成功");
                      this.closeDesign();
                      this.page.pageNo = 1;
                      this.searchText = "";
                      // this.tableLoading = true;
                      this.$refs.multipleTable.clearSelection();
                      this.getList();
                      this.$store.dispatch("GenerateRoutes").then((per) => {
                        router.addRoutes(per)
                      });
                    })
                  }
                })
                .catch((e) => console.log(e));
            }
          }, 1000);
        } else { //编辑修改门户
          let data = {
            component: "custom/portaldesign/components/portalPage",
            icon: this.portalInfo.basic.icon,
            name: this.portalInfo.basic.portalName,
            parentId: this.portalInfo.basic.superior,
            path: this.portalInfo.basic.superior === 0 ?
              `/portal/portalPage/${this.portalInfo.basic.portalName}/${this.portalInfo.id}/` :
              `portalPage/${this.portalInfo.id}`,
            permission: "",
            sort: this.portalInfo.basic.sort,
            status: 0,
            type: 2,
            id: this.menuId
          };
          this.updateMenu(data)  //修改门户菜单
          let params = {
            ...this.portalInfo.basic,
            id: this.portalInfo.id,
            portalJsonMessage: JSON.stringify(this.$refs.design.drawingList),
          };
          //修改门户信息
          editPortal(params)
            .then((res) => {
              if (res.code === 0) {
                this.$message.success("修改成功");
                // this.tableLoading = true;
                this.$refs.multipleTable.clearSelection();
                // this.getList();
                // setTimeout(() => {
                //   window.location.reload() //重新加载页面
                // }, 1000)
                this.getList();
                this.$store.dispatch("GenerateRoutes").then((per) => {
                  if (this.superiorCopy !== this.portalInfo.basic.superior) {
                    router.addRoutes([...per])
                  }
                  this.closeDesign();
                });
              }
            })
            .catch((e) => console.log(e));
        }
      },
      //关闭门户设计，重置、清空变量
      closeDesign() {
        this.menuId = "";
        this.showDesigner = false;
        this.stepNum = 1;
        this.$refs.basicForm.resetFields();
        this.$refs.design.drawingList = []
        this.portalInfo.id = ''
        this.isFinish = false
      },
      //门户设计：下一步/上一步
      nextStep(flag) {
        if (flag === "plus") {
          this.$refs.basicForm.validate((valid) => { //校验步骤一数据
            if (valid) {
              let params = {
                ...this.portalInfo.basic,
                isBase: true
              };
              if (this.portalInfo.id) { //修改编辑门户
                if (this.portalInfo.basic.portalNumber === this.portalNumber && this.portalInfo.basic.portalName ===
                  this.portalName) { //第一步信息未修改
                  this.stepNum++;
                  return true;
                } else { 
                  params.id = this.portalInfo.id
                  editPortal(params).then((res) => {
                    if (res.data) {
                      this.stepNum++;
                      return true;
                    }
                  }).catch(e => console.log(e))
                }
              } else { //新增门户，校验门户名称、门户编码
                addPortal(params).then((res) => {
                  if (res.data) {
                    this.stepNum++;
                    return true;
                  }
                }).catch(e => console.log(e))
              }
            } else {
              return false;
            }
          });
        } else {
          this.stepNum--;
        }
      },
      //搜索
      searchChange() {
        this.searchFormData = reorganizationParam({name: this.searchText})
        this.page.pageNo = 1;
        this.tableLoading = true;
        this.getList();
      },
      //搜索重置
      resetSearch() {
        this.searchFormData={}
        this.searchText = ''
        this.searchChange()
      },
      //每页条数更改
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
        this.page.pageNo = 1;
        this.tableLoading = true;
        this.getList();
      },
      //页码更改
      currentChange(current) {
        this.page.pageNo = current;
        this.tableLoading = true;
        this.getList();
      },
      //排序校验
      sortValidator(rule, value, callback) {
        if (value > 2147483647) {
          callback(new Error('不能超过2147483647'))
        } else {
          callback()
        }
      },
    },
  };

</script>
<style lang="scss" scoped>
  .designer {
    .base {
      margin-right: 20%;
      margin-left: 15%;
      margin-top: 5%;

      .el-form-item {
        margin-bottom: 40px;
      }
    }

    .el-input--mini {
      width: 80px;
    }

    .designHeader {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .designStep {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-left: 10%;

        .designStepItem {
          width: 33.3%;
          display: flex;
          align-items: center;
          justify-content: space-around;

          .designStepLine {
            display: inline-block;
            width: calc(100% - 110px);
            height: 2px;
          }

          .designStepIndex {
            font-size: 16px;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            margin-right: 5px;
            margin-left: 5px;
            font-weight: bold;
          }

          .designStepTitle {
            font-size: 14px;
            font-weight: bold;
            width: 70px;
          }
        }
      }
    }
  }

</style>
<style lang="scss">
  .designer {
    .el-table {
      box-sizing: border-box;

      &::before {
        height: 0px;
      }
    }

    .el-table--border::after,
    .el-table--group::after {
      width: 0px;
      height: 0px;
    }

    .tableInfo {
      .el-table__cell {
        // border-bottom: 0px;
        padding: 0px;
      }
    }

    .formConfig {
      .el-form-item {
        margin-bottom: 18px;
      }

      .el-table__cell {
        // border-bottom: 0px;
        padding: 0px;
      }

      .el-table__body-wrapper {
        margin-top: 10px;
      }
    }

    // 当前行高亮颜色
    // .current-row > td {
    //   background: #b2c8df !important;
    //   // color: white;
    // }

    // 鼠标悬浮行颜色
    // tr:hover > td {
    //   background-color: #b2c8df !important;
    // }
  }

</style>
